<template>
  <el-header class="header">
    <img class="logo" src="@/assets/logo.png" />
    <h3 class="title flex-1">{{ title }}</h3>
    <a
      v-if="!hideAd"
      class="ad"
      href="https://www.tlwok.com/itemlist/1004367/01?hmsr=G%E9%87%87%E9%80%9A&hmpl=&hmcu=&hmkw=&hmci="
      target="_blank"
    >
      <img src="@/assets/supply_chain.jpg" />
    </a>
    <div class="flex-1"></div>
    <!-- <div class="right"> -->
    <el-button
      type="light"
      icon="el-icon-refresh"
      size="small"
      @click="reloadPage"
      >刷新</el-button
    >
    <div class="user flex-center">
      <el-avatar :size="35" :src="userPhoto"></el-avatar>
      <span>{{ userName }}</span>
    </div>
    <el-button type="text" icon="el-icon-switch-button" @click="signOut"
      >退出</el-button
    >
    <!-- </div> -->
  </el-header>
</template>

<script>
export default {
  name: 'LayoutHeader',
  props: {
    title: {
      type: String,
      default: '“G采通”系统',
    },
    hideAd: Boolean,
  },
  data() {
    // 这里存放数据
    return {
      userName: '未登录',
      userPhoto:
        '//img-b2b.jcloudcs.com/1deac225-33a2-4892-81e7-3321727c78f5.png',
    }
  },
  mounted() {
    this.getLoginUserInfo()
    this.getOfflineAuthority()
  },
  methods: {
    reloadPage() {
      location.reload()
    },
    signOut() {
      const _this = this
      const httpUrl = location.hash
      const url = location.href
      if (httpUrl.indexOf('admin') != -1) {
        // 后台管理
        _this
          .$confirm('是否确定退出登录？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            _this.$axios.get('/api/manage/admin/logout').then(resp => {
              location.href = location.origin + '/#/admin/Login'
            })
          })
          .catch(() => {})
      } else {
        // 服务商报备
        _this
          .$confirm('是否确定退出登录？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            _this.$axios.get('/api/logout').then(resp => {
              window.location.href = 'http://' + resp.result
            })
          })
          .catch(() => {})
      }
    },
    changeActive() {
      window.location.href = 'https://www.tlwok.com'
    },
    // 获取登录人信息
    getLoginUserInfo() {
      const url = location.hash

      let http = '/api/createFilingMessage/getUserInfo'
      if (url.indexOf('admin') != -1) {
        http = '/api/manage/home/getUserInfo'
      }
      this.$axios.post(http).then(resp => {
        if (resp.success) {
          this.$root.userInfo = resp.result
          if (resp.result.avatarPicSrc) {
            this.userName = resp.result.userName
            this.userPhoto = resp.result.avatarPicSrc
          } else {
            this.userName = resp.result.userName
          }
          // 全局设置用户信息
          // $userInfo = resp.result
        }
      })
    },
    // 线下采购订单菜单权限
    getOfflineAuthority() {
      const url = location.hash
      if (url.indexOf('admin') == -1)
        this.$axios.post('/api/offline/getOfflineAuthority').then(resp => {
          if (resp.result === true) this.$store.commit('setOfflineRole', true)
        })
    },
    // 去登陆
    gotoLogin() {
      if (this.userName == '未登录') {
        const origin = location.origin
        const hrefUrl = origin + '/login?ReturnUrl='
        const url = encodeURIComponent(location.href)
        window.location.href = hrefUrl + url
      } else {
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  height: 65px;
  padding: 0 38px;
  align-items: center;
  // box-shadow: 0px 3px 5px #ddd;
  border: solid 1px $--color-border;
  > * {
    margin-right: 60px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.title {
  padding: 5px 12px;
  border-left: 4px solid $--color-primary;
  // margin-left: 50px;
}
.ad {
  text-align: center;
  margin: 0;
  img {
    height: 50px;
  }
}
.user {
  span {
    margin-left: 10px;
  }
}
</style>
